<template>
    <!-- 课程管理 -->
    <div class="scheme">
        <div class="header-box">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="姓名：">
                    <el-input v-model="formInline.nickname" placeholder="请输入姓名"></el-input>
                </el-form-item>
                <el-form-item label="手机号：">
                    <el-input v-model="formInline.mobile" placeholder="请输入用户手机号"></el-input>
                </el-form-item>
                <el-form-item label="微信号：">
                    <el-input v-model="formInline.wx" placeholder="请输入微信号"></el-input>
                </el-form-item>
                <el-form-item label="小区：">
                    <el-input v-model="formInline.school" placeholder="请输入小区"></el-input>
                </el-form-item>
                <el-form-item label="备注：">
                    <el-input v-model="formInline.remark" placeholder="请输入备注"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="submitForm">搜索</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="success" icon="el-icon-plus" @click="add">新增</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="tables">
            <el-table border :data="tableData" max-height="650" highlight-current-row :row-style="{height: '20px'}"
                      :header-cell-style="{background:'#e6e6e6',color:'#000000'}">
                <el-table-column prop="id" align="center" label="ID" width="80">
                </el-table-column>
                <el-table-column prop="nickname" align="center" label="姓名"></el-table-column>
                <el-table-column prop="mobile" align="center" label="手机号"></el-table-column>
                <el-table-column prop="wx" align="center" label="微信号"></el-table-column>
                <el-table-column prop="birthday" align="center" label="出生日期"></el-table-column>
                <el-table-column prop="school" align="center" label="小区"></el-table-column>
                <el-table-column prop="remark" align="center" label="备注"></el-table-column>
                <el-table-column prop="point" align="center" label="积分"></el-table-column>
                <el-table-column prop="status" align="center" label="状态">
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'"
                                disable-transitions>{{ scope.row.status === 1 ? '启用' : '禁用' }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="sex" align="center" label="性别">
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.sex === 1 ? 'success' : 'danger'"
                                disable-transitions>{{ scope.row.sex === 1 ? '男' : '女' }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="inviter_mobile" align="center" label="邀请手机号码"></el-table-column>
                <el-table-column prop="created_at" align="center" label="创建时间">
                </el-table-column>
                <el-table-column align="center" label="操作" width="300">
                    <template slot-scope="scope">
                        <el-button round size="mini" type="primary" plain icon="el-icon-edit" @click="handleEdit(scope.row)">
                            编辑
                        </el-button>
<!--                        <el-button round size="mini" type="success" plain icon="el-icon-edit"-->
<!--                                   @click="handleMember(scope.row)">成员管理-->
<!--                        </el-button>-->
                        <el-button round size="mini" type="warning" plain icon="el-icon-tickets"
                                   @click="handleCourse(scope.row)">报名详情
                        </el-button>
<!--                        <el-button round size="mini" type="danger" plain icon="el-icon-delete"-->
<!--                                   @click="handleDelete(scope.row)">删除-->
<!--                        </el-button>-->
                    </template>

                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                               :current-page.sync="page" :page-sizes="[15, 20, 50, 100]" :page-size="limit"
                               layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </div>


        <el-dialog :title="title" :visible.sync="dialogAdd" :show-close="false" :close-on-click-modal="false"
                   :close-on-press-escape="false">
            <el-form :model="form" :rules="rules">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="姓名" prop="nickname">
                            <el-input v-model="form.nickname" style="width: 313px;"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="手机号" prop="mobile">
                            <el-input v-model="form.mobile" style="width: 300px;" :disabled="isDisable"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="微信号" prop="wx">
                            <el-input v-model="form.wx" style="width: 313px;"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="出生日期" prop="birthday">
                            <el-date-picker
                                v-model="form.birthday"
                                type="date"
                                format="yyyy-MM-dd"
                                value-format="yyyy-MM-dd"
                                 placeholder="选择日期"
                                style="width: 280px;"
                            >

                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="小区" prop="school">
                            <el-input v-model="form.school" style="width: 313px;"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="备注" prop="remark">
                            <el-input v-model="form.remark" style="width: 300px;" ></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="性别" prop="sex">
                            <el-radio-group v-model="form.sex">
                                <el-radio label="1">男</el-radio>
                                <el-radio label="2">女</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="状态" prop="status">
                            <el-radio-group v-model="form.status">
                                <el-radio label="1">启用</el-radio>
                                <el-radio label="2">禁用</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>

                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="submitData">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 成员列表弹框 -->
        <el-dialog title="成员列表记录" :visible.sync="dialogMember" width="65%" :close-on-click-modal="false"
                   :close-on-press-escape="false">

            <el-button type="success" icon="el-icon-plus" @click="addMember">新增</el-button>

            <el-table border :data="userMemberList" height="350" highlight-current-row :row-style="{height: '20px'}"
                      :header-cell-style="{background:'#e6e6e6',color:'#000000'}">
                <el-table-column prop="nickname" align="center" label="姓名">
                </el-table-column>
                <el-table-column prop="sex_name" align="center" label="性别">
                </el-table-column>
                <el-table-column prop="card_type_name" align="center" label="证件类型">
                </el-table-column>
                <el-table-column prop="card" align="center" label="证件号码">
                </el-table-column>
                <el-table-column prop="birthday" align="center" label="生日">
                </el-table-column>

                <el-table-column prop="created_at" align="center" label="创建日期">
                </el-table-column>

                <el-table-column align="center" label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" type="success" @click="editUserMember(scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="deleteUserMember(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination background @size-change="handleMemberSizeChange"
                               @current-change="handleMemberCurrentChange"
                               :current-page.sync="pageMember" :page-sizes="[15, 20, 50, 100]" :page-size="limitMember"
                               layout="total, sizes, prev, pager, next, jumper" :total="totalMember">
                </el-pagination>
            </div>
        </el-dialog>

        <el-dialog :title="userMemberTitle" :visible.sync="dialogMemberAdd" :show-close="false"
                   :close-on-click-modal="false"
                   :close-on-press-escape="false">
            <el-form :model="memberForm" :rules="memberRules">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="姓名" prop="nickname">
                            <el-input v-model="memberForm.nickname" style="width: 313px;"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="出生日期" prop="birthday">
                            <el-date-picker v-model="memberForm.birthday" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                                            type="date" placeholder="选择日期" style="width: 285px;">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="证件类型" prop="card_type">
                            <el-select size="mini" v-model="memberForm.card_type" placeholder="请选择" style="width: 70%;">
                                <el-option :label="item.name" :value="item.id" v-for="item in cardTypeList"
                                           :key="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="证件号码" prop="card">
                            <el-input v-model="memberForm.card" style="width: 300px;"></el-input>
                        </el-form-item>
                    </el-col>


                    <el-col :span="12">
                        <el-form-item label="性别" prop="sex">
                            <el-radio-group v-model="memberForm.sex">
                                <el-radio :label="1">男</el-radio>
                                <el-radio :label="2">女</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="地址" prop="address">
                            <el-input v-model="memberForm.address" style="width: 330px;"></el-input>
                        </el-form-item>
                    </el-col>

                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelMember">取 消</el-button>
                <el-button type="primary" @click="submitMemberData">确 定</el-button>
            </div>
        </el-dialog>


        <!-- 约课详情弹框 -->
        <el-dialog title="报名详情记录" :visible.sync="dialogSee" width="80%" :close-on-click-modal="false"
                   :close-on-press-escape="false">
            <el-table border :data="bookCourseList"
                      :summary-method="getSummaries"
                      show-summary
                      height="550" highlight-current-row :row-style="{height: '20px'}"
                      :header-cell-style="{background:'#e6e6e6',color:'#000000'}">
                <el-table-column prop="order_no" align="center" label="订单编号">
                </el-table-column>
                <el-table-column prop="course_name" align="center" label="课程名称">
                </el-table-column>
                <el-table-column prop="week_time" align="center" label="课程时间" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="price" align="center" label="单价">
                </el-table-column>
                <el-table-column prop="book_num" align="center" label="预订节数"></el-table-column>
                <el-table-column prop="book_money" align="center" label="总金额"></el-table-column>
                <el-table-column prop="used_num" align="center" label="核销节数"></el-table-column>
                <el-table-column prop="date_num" align="center" label="约课节数"></el-table-column>
<!--                <el-table-column prop="expire_num" align="center" label="过期节数"></el-table-column>-->
                <el-table-column prop="back_num" align="center" label="退款节数"></el-table-column>
                <el-table-column prop="left_num" align="center" label="剩余节数"></el-table-column>
                <el-table-column prop="status_name" align="center" label="状态">
                </el-table-column>

                <el-table-column prop="created_at" align="center" label="创建日期">
                </el-table-column>

            </el-table>
            <div class="pagination">
                <el-pagination background @size-change="handleBookSizeChange" @current-change="handleBookCurrentChange"
                               :current-page.sync="pageBook" :page-sizes="[15, 20, 50, 100]" :page-size="limitBook"
                               layout="total, sizes, prev, pager, next, jumper" :total="totalBook">
                </el-pagination>
            </div>
        </el-dialog>

    </div>
</template>

<script>

export default {
    name: "user",
    data() {
        return {
            formInline: {
                nickname: "",
                mobile: "",
                wx:"",
                school:"",
                remark:"",
            },
            form: {
                nickname: "",
                mobile: "",
                wx:"",
                birthday:"",
                school:"",
                remark:"",
                sex: "",
                status: "",

            },
            //新建账号表单校验
            rules: {
                // nickname: [{required: true, message: "请输入姓名", trigger: "blur"}],
                mobile: [{required: true, message: "请输入手机号码", trigger: "blur"}],
                // sex: [{required: true, message: "请选择性别", trigger: "change"}],
                // birthday: [{required: true, message: "请选择出生日期", trigger: "change"}],
                status: [{required: true, message: "请选择状态", trigger: "change"}],
            },
            tableData: [
                {id: 1, name: '张三', phone: '13401230123', status: 1, time: '2023-10-15 10:20:35'},

            ],
            isDisable:true,
            dialogAdd: false, //默认新增课程弹框隐藏
            title: "新增 ", //默认新增
            isEdit: false, //默认为新增
            page: 1, //默认第一页
            limit: 15, //默认一页显示10条数据
            total: 0,
            id: 0,
            //book
            bookCourseList: [],
            dialogSee: false,
            pageBook: 1,
            limitBook: 15,
            totalBook: 0,
            //member
            userMemberList: [],
            dialogMember: false,
            pageMember: 1,
            limitMember: 10,
            totalMember: 0,
            user_id: 0,
            userMemberTitle: '新增成员',
            dialogMemberAdd: false,
            memberForm: {
                nickname: '',
                card_type: '',
                card: '',
                birthday: '',
                sex: '',
                address: '',
            },
            isMemberEdit: false,
            user_member_id: 0,
            cardTypeList: [{id: 1, name: '身份证'}, {id: 2, name: '台胞证'}, {id: 3, name: '护照'}],
            memberRules: {
                nickname: [{required: true, message: "请输入姓名", trigger: "blur"}],
                birthday: [{required: true, message: "请选择出生日期", trigger: "change"}],
                card_type: [{required: true, message: "请选择证件类型", trigger: "blur"}],
                card: [{required: true, message: "请输入证件号码", trigger: "blur"}],
                sex: [{required: true, message: "请选择性别", trigger: "change"}],
                address: [{required: true, message: "请输入地址", trigger: "change"}],
            },
            dataTotal:[],

        };
    },
    created() {
        this.getUserList();
    },
    activated() {
        this.getUserList();
    },
    components: {},
    methods: {
        initForm() {
            this.form.nickname = "";
            this.form.mobile = "";
            this.form.wx = "";
            this.form.birthday = "";
            this.form.school = "";
            this.form.remark = "";
            this.form.sex = "";
            this.form.status = "";
        },
        initMemberForm() {
            this.memberForm = {
                nickname: "",
                birthday: "",
                card_type: "",
                card: "",
                sex: "",
                address: "",
            }

        },
        cancel() {
            this.dialogAdd = false;
            this.initForm();

        },
        cancelMember() {
            this.dialogMemberAdd = false;
            this.initMemberForm();

        },
        // 点击新增
        add() {
            this.title = "新增(带红色*的为必填)";
            this.dialogAdd = true;
            this.isDisable = false;
            this.isEdit = false;
            this.initForm();
        },
        getUserList(page, limit) {
            let params = {
                page: page,
                per_page: limit,
                nickname:this.formInline.nickname,
                mobile:this.formInline.mobile,
                wx:this.formInline.wx,
                school:this.formInline.school,
                remark:this.formInline.remark,
            };
            this.$get(this.$api.userApi, params).then((res) => {
                if (res.code == 200) {
                    this.tableData = res.data.data;
                    this.total = res.data.total;
                } else {
                    return this.$message.error(res.msg);
                }
            });
        },

        // 点击编辑按钮
        handleEdit(row) {
            this.title = "编辑";
            this.isDisable = true;
            this.id = row.id;
            this.form.nickname = row.nickname;
            this.form.mobile = row.mobile;
            this.form.wx = row.wx;
            this.form.birthday = row.birthday;
            this.form.school = row.school;
            this.form.remark=row.remark;
            this.form.sex = row.sex.toString();
            this.form.status = row.status.toString();
            console.log(this.form)

            this.dialogAdd = true;
            this.isEdit = true;
        },
        // 点击编辑弹框取消按钮
        goToEdit() {
            this.dialogAdd = false;
            this.isEdit = false;
        },

        // 点击删除按钮
        handleDelete(row) {
            this.$confirm("此操作将永久删除该信息, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.$delete(this.$api.userApi + "/" + row.id).then((res) => {
                        if (res.code == 200) {
                            this.getUserList(this.page, this.limit);
                            return this.$message.success("删除成功！");
                        } else {
                            return this.$message.error(res.msg);
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
        addMember() {
            this.dialogMemberAdd = true;
            this.isMemberEdit = false;
            this.userMemberTitle = "新增成员";

        },
        editUserMember(row) {
            this.userMemberTitle = "编辑成员";
            this.user_member_id = row.id;
            this.dialogMemberAdd = true;
            this.isMemberEdit = true;
            this.memberForm = {
                nickname: row.nickname,
                birthday: row.birthday,
                card_type: row.card_type,
                card: row.card,
                sex: row.sex,
                address: row.address,
            }

        },
        deleteUserMember(row){
            this.$confirm("此操作将永久删除该成员, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.$delete(this.$api.userMemberApi + "/" + row.id).then((res) => {
                        if (res.code == 200) {
                            this.getUserMemberList();
                            return this.$message.success("删除成功！");
                        } else {
                            return this.$message.error(res.msg);
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });

        },
        submitMemberData() {
            if (this.memberForm.nickname == "") {
                return this.$message.error("请输入姓名！");
            }
            if (this.memberForm.card_type == "") {
                return this.$message.error("请选择证件类型！");
            }
            if (this.memberForm.card == "") {
                return this.$message.error("请输入证件号码！");
            }
            if (this.memberForm.birthday == "") {
                return this.$message.error("请输入出生日期！");
            }
            if (this.memberForm.sex == "") {
                return this.$message.error("请选择性别！");
            }
            if (this.memberForm.address == "") {
                return this.$message.error("请输入地址！");
            }

            let params = {
                user_id: this.user_id,
                nickname: this.memberForm.nickname,
                birthday: this.memberForm.birthday,
                card_type: this.memberForm.card_type,
                card: this.memberForm.card,
                sex: this.memberForm.sex,
                address: this.memberForm.address,

            };
            if (this.isMemberEdit) {
                this.$put(this.$api.userMemberApi + "/" + this.user_member_id, params).then(
                    (res) => {
                        if (res.code == 200) {
                            this.getUserMemberList(this.pageMember, this.limitMember);
                            this.dialogMemberAdd = false;
                            return this.$message.success("编辑成功！");
                        } else {
                            return this.$message.error(res.msg);
                        }
                    }
                );

            } else {
                this.$post(this.$api.userMemberApi, params).then((res) => {
                    if (res.code == 200) {
                        this.dialogMemberAdd = false;
                        this.getUserMemberList(this.pageMember, this.limitMember);
                        return this.$message.success("新增成功！");
                    } else {
                        return this.$message.error(res.msg);
                    }
                });

            }

        },
        // 分页
        handleSizeChange(size) {
            this.limit = size;
            this.getUserList(this.page, this.limit);
        },
        handleMemberSizeChange(size) {
            this.limitMember = size;
            this.getUserMemberList(this.pageMember, this.limitMember);
        },
        //获取约课详情列表分页变动
        handleBookSizeChange(size) {
            this.limitBook = size;
            this.getUserCourseList();

        },
        handleCurrentChange(index) {
            this.page = index;
            this.getUserList(this.page, this.limit);
        },
        handleMemberCurrentChange(index) {
            this.pageMember = index;
            this.getUserMemberList(this.pageMember, this.limitMember);
        },
        handleBookCurrentChange(index) {
            this.pageBook = index;
            this.getUserCourseList();
        },
        // 点击查询按钮
        submitForm() {
            this.getUserList(this.page, this.limit);
        },

        // 提交课程数据确定按钮
        submitData() {
            if (this.form.mobile == "") {
                return this.$message.error("请输入手机号！");
            }
            if (this.form.sex == "") {
                return this.$message.error("请选择性别！");
            }
            if (this.form.status == "") {
                return this.$message.error("请选择状态！");
            }
            let params = {
                nickname: this.form.nickname,
                mobile: this.form.mobile,
                wx:this.form.wx,
                birthday:this.form.birthday,
                school:this.form.school,
                remark:this.form.remark,
                sex: this.form.sex,
                status: this.form.status,
            };
            if (this.isEdit) {
                this.$put(this.$api.userApi + "/" + this.id, params).then(
                    (res) => {
                        if (res.code == 200) {
                            this.getUserList(this.page, this.limit);
                            this.dialogAdd = false;
                            return this.$message.success("编辑成功！");
                        } else {
                            return this.$message.error(res.msg);
                        }
                    }
                );

            } else {
                this.$post(this.$api.userApi, params).then((res) => {
                    if (res.code == 200) {
                        this.dialogAdd = false;
                        this.getUserList(this.page, this.limit);
                        return this.$message.success("新增成功！");
                    } else {
                        return this.$message.error(res.msg);
                    }
                });

            }
        },
        handleMember(row) {
            this.dialogMember = true;
            this.user_id = row.id;
            this.getUserMemberList();

        },
        //查看约课详情
        handleCourse(row) {
            this.dialogSee = true
            this.user_id = row.id;
            this.getUserCourseList();

        },
        getUserMemberList() {
            let params = {
                user_id: this.user_id,
                page: this.pageMember,
                per_page: this.limitMember,
            }
            this.$get(this.$api.userMemberApi, params).then((res) => {
                if (res.code == 200) {
                    this.userMemberList = res.data.data;
                    this.totalMember = res.data.data.total;
                }

            })

        },
        getUserCourseList() {
            let params = {
                user_id: this.user_id,
                page: this.pageBook,
                per_page: this.limitBook,
            }
            this.$get(this.$api.userCourseApi, params).then((res) => {
                if (res.code == 200) {
                    this.bookCourseList = res.data.list.data;
                    this.totalBook = res.data.list.total;
                    this.dataTotal = res.data.total;
                    this.getSummaries();
                }

            })

        },
        getSummaries(param)
        {
            const sums =[];
            sums[0]='总计';
            sums[4]=this.dataTotal.book_num;
            sums[5]=this.dataTotal.book_money;
            sums[6]=this.dataTotal.used_num;
            sums[7]=this.dataTotal.date_num;
            sums[8]=this.dataTotal.back_num;
            sums[9]=this.dataTotal.left_num;
            console.log('sums',sums)
            return sums;
        },
    },
};
</script>

<style scoped>
.pagination {
    text-align: center;
}

</style>
